<template>
    <div class="payment-create">
      <div class="page-header">
        <h2>创建支付订单</h2>
        <el-button @click="$router.back()">返回</el-button>
      </div>
  
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="payment-form"
      >
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" />
        </el-form-item>
  
        <el-form-item label="司机ID" prop="driverId">
          <el-input v-model="form.driverId" placeholder="请输入司机ID" />
        </el-form-item>
  
        <el-form-item label="支付金额" prop="amount">
          <el-input-number
            v-model="form.amount"
            :precision="2"
            :step="0.1"
            :min="0"
            placeholder="请输入支付金额"
          />
        </el-form-item>
  
        <el-form-item label="支付方式" prop="paymentType">
          <el-radio-group v-model="form.paymentType">
            <el-radio :label="1">支付宝</el-radio>
            <el-radio :label="2">微信支付</el-radio>
          </el-radio-group>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">创建订单</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  const router = useRouter()
  const formRef = ref(null)
  
  const form = ref({
    userId: '',
    driverId: '',
    amount: 0,
    paymentType: null
  })
  
  const rules = {
    userId: [
      { required: true, message: '请输入用户ID', trigger: 'blur' },
      { pattern: /^\d+$/, message: '用户ID必须为数字', trigger: 'blur' }
    ],
    driverId: [
      { required: true, message: '请输入司机ID', trigger: 'blur' },
      { pattern: /^\d+$/, message: '司机ID必须为数字', trigger: 'blur' }
    ],
    amount: [
      { required: true, message: '请输入支付金额', trigger: 'blur' },
      { type: 'number', min: 0.01, message: '支付金额必须大于0', trigger: 'blur' }
    ],
    paymentType: [
      { required: true, message: '请选择支付方式', trigger: 'change' }
    ]
  }
  
  const handleSubmit = async () => {
    if (!formRef.value) return
  
    try {
      await formRef.value.validate()
      const response = await axios.post('/api/payment/create', form.value)
      ElMessage.success('创建成功')
      router.push('/payment')
    } catch (error) {
      if (error.response) {
        ElMessage.error(error.response.data.message || '创建失败')
      }
    }
  }
  </script>
  
  <style scoped>
  .payment-create {
    padding: 20px;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .payment-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  </style> 